<template>
    <div class="transfer">
        <el-divider content-position="left">tree</el-divider>
        <el-tree :data="treeData" node-key="key" default-expand-all show-checkbox @check="treeCheckChange"></el-tree>
        <el-divider content-position="left">el-transfer</el-divider>
        <!-- 原来的transfer -->
        <originalTransfer v-model="functionChecked" :data="functionSourceArray" :titles="['请选择功能', '已选择功能']"
            @change="transferChange" target-order='push'></originalTransfer>
        <el-divider content-position="left">tree-transfer</el-divider>
        <!-- 改造的treeTransfer -->
        <my-el-tree-transfer v-model="treeChecked" :data="treeData" :titles="['请选择功能', '已选择功能']"
            @change="transferChange" target-order='push'></my-el-tree-transfer>
    </div>
</template>

<script>
import originalTransfer from '@/components/originalTransfer'
import myElTreeTransfer from '@/components/treeTransfer'
export default {
    name: 'transfer',
    components: { originalTransfer,myElTreeTransfer },
    data() {
        return {
            functionChecked: [],
            functionSourceArray: [
                { key: 1, label: '功能1' },
                { key: 2, label: '功能2' },
                { key: 3, label: '功能3' },
                { key: 4, label: '功能4' },
            ],
            treeChecked: [],
            treeData: [
                {
                    label: '一级 1', children: [
                        { key: 2, label: '二级 1-1' },
                        { key: 3, label: '二级 1-2' },
                    ]
                },
                {
                    label: '一级 2', children: [
                        { key: 5, label: '二级 2-1' },
                        { key: 6, label: '二级 2-2' },
                    ]
                },
            ]
        }
    },
    methods: {
        treeCheckChange(cur,checkedInfo){
            console.log(cur,checkedInfo)
        },
        transferChange(e) {
            console.log(e)
        },
        
    }
}
</script>
